<template>
	<div>
		<div class="design" :style="'transform: scale(' + scale / 100 + '); transform-origin: 50% 0px 0px; width: 100%;'">
			<process @select="selectNode"></process>
			<el-row>
				<div class="end">
					<div></div>
					<div></div>
					<div class="end-node">流程结束</div>
				</div>
			</el-row>
		</div>
		<el-drawer
			:title="select.name"
			:visible.sync="drawer"
			:size="nodeType.TJ === select.type ? '600px' : '400px'"
			direction="rtl"
			:modal="false"
		>
			<div slot="title">
				<el-input v-model="select.name" size="medium" v-if="showInput" style="width: 300px" @blur="showInput = false"></el-input>
				<el-link v-else @click="showInput = true" style="font-size: medium">
					<i class="el-icon-edit" style="margin-right: 10px"></i>
					{{ select.name }}
				</el-link>
			</div>

			<node-config :node="select"></node-config>
		</el-drawer>
		<div>
			<el-button type="primary" size="medium" @click="saveProcessDesign()">保存</el-button>
		</div>
	</div>
</template>

<script>
import process from "./process/processView"
import nodeConfig from "./process/nodeConfig"
import { nodeType, getDefaultNodeProps } from "./common/enumConst"
import { flowabletemplateInfo, flowabletemplateSave, flowabletemplateEdit } from "@/api/flowable/flowabletemplate.js"

export default {
	name: "FortressBpmn",
	props: {
		hcBpmnId: [Number, String],
	},
	components: { process, nodeConfig },
	data() {
		return {
			nodeType: nodeType,
			select: {},
			showInput: false,
			drawer: false,
			scale: 100,
			nodes: [],
			hcBpmnForm: {
				id: "",
				title: "",
				status: "2",
				actKey: "",
				contentXml: "",
				contextJson: "",
				form: [],
			},
		}
	},
	created() {
		//编辑
		if (this.hcBpmnId) {
			flowabletemplateInfo(this.hcBpmnId).then(resp => {
				if (resp.code == 0) {
					this.$nextTick(() => {
						this.hcBpmnForm = {
							...this.hcBpmnForm,
							...resp.data,
						}
						if (this.hcBpmnForm.contextJson) {
							let contextJson = JSON.parse(this.hcBpmnForm.contextJson)
							if (this.hcBpmnForm.form) {
								contextJson.form = this.hcBpmnForm.form
							}
							this.$store.commit("setFlowableTemplate", this.getTemplateData(contextJson))
						} else {
							this.$store.commit("setFlowableTemplate", this.getTemplateData())
						}
					})
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		}
	},
	mounted() {},
	methods: {
		selectNode(node) {
			this.select = node
			this.drawer = true
		},
		templateDecode() {},
		getTemplateData(data) {
			return {
				id: this.$tools.setDefalut(data, "templateId", this.hcBpmnId),
				baseSetup: {
					icon: this.$tools.setDefalut(data, "icon", "el-icon-s-custom"),
					background: this.$tools.setDefalut(data, "background", "#FF7800"),
					name: this.$tools.setDefalut(data, "templateName", this.hcBpmnForm.title),
					sign: this.$tools.setDefalut(data, "sign", false),
					remark: this.$tools.setDefalut(data, "remark", ""),
					notify: JSON.parse(this.$tools.setDefalut(data, "notify", JSON.stringify({ types: [], title: "" }))),
					whoCommit: JSON.parse(this.$tools.setDefalut(data, "whoCommit", "[]")),
					whoEdit: JSON.parse(this.$tools.setDefalut(data, "whoEdit", "[]")),
					whoExport: JSON.parse(this.$tools.setDefalut(data, "whoExport", "[]")),
				},
				process: this.$tools.setDefalut(data, "process", {
					type: nodeType.ROOT,
					name: "发起人",
					id: "10000",
					props: getDefaultNodeProps(),
				}),
				form: this.$tools.setDefalut(data, "form", this.hcBpmnForm.form),
			}
		},
		//保存流程图
		saveProcessDesign() {
			this.hcBpmnForm.contextJson = JSON.stringify(this.$store.state.flowableTemplate)
			flowabletemplateEdit(this.hcBpmnForm).then(resp => {
				if (resp.code == 0) {
					this.$message({
						type: "success",
						message: "操作成功!",
					})
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
*,
::after,
::before {
	box-sizing: content-box;
}
$primary: #1890ff;

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: #e1e1e1;
}

::-webkit-scrollbar-thumb {
	border-radius: 16px;
	background-color: #99999a;
}

.design {
	margin-top: 10px;
	box-sizing: content-box !important;
	//overflow: auto;
	/deep/ .el-row {
		display: flex;
		justify-content: center;

		.end {
			/*div:first-child{
					margin: 0 auto;
					border-radius: 50%;
					border: 5px solid #a9a9a9;
					width: 0;
					height: 0;
				}
				div:nth-child(2){
					height: 30px;
					margin: 0 auto;
					width: 0;
					border: 1px solid #a9a9a9;
				}*/

			.end-node {
				margin-bottom: 20px;
				border-radius: 15px;
				padding: 5px 10px;
				font-size: small;
				color: #747474;
				background-color: #f2f2f2;
				box-shadow: 0 0 10px 0 #bcbcbc;
			}
		}
	}
}

/deep/ .el-link {
	display: inline;
	width: 50px;
}

/deep/ .el-drawer__body {
	overflow-y: auto;

	&::-webkit-scrollbar {
		width: 8px;
		height: 8px;
		background-color: #e1e1e1;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background-color: #a8a8a9;
	}
}

.scale {
	z-index: 999;
	position: fixed;
	top: 80px;
	right: 40px;

	span {
		margin: 0 10px;
		font-size: 15px;
		color: #7a7a7a;
		width: 50px;
	}
}
</style>
